<template>
  <section class="count">
    <el-row>
      <el-col :span="24">
        <el-col :span="12">
          <div id="chartColumn" style="width:100vh; height:400px;"></div>
        </el-col>
        <el-col :span="8"  :offset="2">
        <div id="chartPie" style="width:100%; height:400px;"></div>
      </el-col>
      </el-col>
      <el-col :span="24">
                <el-col :span="24">
                    <div id="chartBar" style="width:100%; height:400px;"></div>
                </el-col>
                <!-- <el-col :span="12">
                    <div id="chartLine" style="width:500px; height:400px;"></div>
                </el-col> -->
      </el-col>
      

      <!-- <el-col :span="12">
        <div style="display:flex;align-items:center;font-size:25px">
          <img src="../../../static/images/u328.png" alt>
          <div style="margin-left:20px;">
            <div>本月收支</div>
            <div>￥15000</div>
          </div>
        </div>
        <div style="display:flex;align-items:center;font-size:25px;margin-top:30px;">
          <img src="../../../static/images/u332.png" alt>
          <div style="margin-left:20px;">
            <div>本月支出</div>
            <div>￥10000</div>
          </div>
        </div>
      </el-col> -->
    </el-row>
  </section>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      chartColumn: null,
      chartColumnSeriesData:[],
      chartColumnXAxisData:[],
      chartBar: null,
      chartLine: null,
      chartPie: null,

      user_ratio:'',//用户比例
      integral_rank:'',//积分排行数据Y
      integral_rankX:''//积分排行数据X
    };
  },
  mounted() {
    this.dataCount();
    this.getSevenDay();
    
  },
  updated() {
  },
  methods: {
    //获取最近七天的日期赋值到图形统计
    getSevenDay(){
      let arr = [];
      for(let i=-6;i<1;i++){
        arr.push(this.getDay(i));
      }
      this.chartColumnXAxisData = arr;
    },
    //获取想要的日期
    getDay(day){
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000*60*60*24*day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tMonth + "月" + tDate + "日";
    },
    //加工月份格式
    doHandleMonth(month){
　　  var m = month;
      if(month.toString().length == 1){
        m = "0" + month;
      }
 　　 return m;
    },
    //获取数据
    async dataCount(){
      const res = await this.$api.dataCount();
      if(res.data.level=='success'){
        let data = res.data.data;
        this.chartColumnSeriesData = [
          data.user_login.one_day.login_count,
          data.user_login.two_day.login_count,
          data.user_login.three_day.login_count,
          data.user_login.four_day.login_count,
          data.user_login.five_day.login_count,
          data.user_login.six_day.login_count,
          data.user_login.seven_day.login_count
        ]

        let user_ratio=data.user_ratio;
        let user=[{'value':user_ratio.user,name:'普通用户'}];
        let vip_user=[{'value':user_ratio.vip_user,name:'会员用户'}]
        this.user_ratio=[...user,...vip_user];//用户比例

        //积分排行榜
        let integral_rank=data.integral_rank;
        let integral_rankX=[];
        let integral_rankY=[];
        integral_rank.forEach(item=>{
          integral_rankX.push(item.real_name);
          integral_rankY.push(item.integral);
        })
        this.integral_rankX=integral_rankX;
        this.integral_rankY=integral_rankY;
        this.drawBarChart();

        this.drawPieChart();
        
        this.drawColumnChart();
      }else{
        this.$message({
          message: res.data.message,
          type: 'warning'
        });
      }
    },
    drawColumnChart() {
      let This = this;
      this.chartColumn = echarts.init(document.getElementById("chartColumn"));
      this.chartColumn.setOption({
        title: { text: "用户登录统计" },
        tooltip: {},
        xAxis: {
          data: This.chartColumnXAxisData,
        },
        yAxis: {
        //   max: function(value) {
        //     return value.min+100;
        // } 
        },
        series: [
          {
            barWidth: 80, //柱图宽度
            barGap: "70%" /*多个并排柱子设置柱子之间的间距*/,
            type: "bar",
            data: This.chartColumnSeriesData
          }
        ]
      });
    },
    drawBarChart() {
      let This=this
      this.chartBar = echarts.init(document.getElementById("chartBar"));
      this.chartBar.setOption({
        title: { text: "积分排行榜" },
        tooltip: {},
        xAxis: {
          name: "姓名",
          data: This.integral_rankX
        },
        yAxis: {
          name: "积分",
          type: "value"
        },
        series: [
          {
            barWidth: 80, //柱图宽度
            name: "积分",
            type: "bar",
            data: This.integral_rankY
          }
        ]
      });
    },
    drawLineChart() {
      this.chartLine = echarts.init(document.getElementById("chartLine"));
      this.chartLine.setOption({
        title: {
          text: "性别比例"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        xAxis: {
          name: "百分比",
          type: "value",
          min: 0,
          max: 100,
          splitNumber: 10
        },
        yAxis: {
          type: "category",
          name: "性别",
          data: ["男", "女"],
          min: 0,
          max: 1,
          splitNumber: 10
        },
        series: [
          {
            name: "2012年",
            type: "bar",
            data: [30, 100],
            barWidth: 10 //柱图宽度
          }
        ]
      });
    },
    drawPieChart() {
      let This = this;
      this.chartPie = echarts.init(document.getElementById("chartPie"));
      this.chartPie.setOption({
        title: {
          text: "用户比例",
          // subtext: '纯属虚构',
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["普通用户", "会员用户"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            selectedMode: 'single',
            data:This.user_ratio,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
  }
};
</script>

<style scoped>
.count {
  width: 100%;
  float: left;
}
/*.chart div {
        height: 400px;
        float: left;
    }*/

.el-col {
  padding: 30px 20px;
}
</style>
